<template>
  <a-spin :spinning="loading">
    <div class="wrapper">
      <div class="wrapper-head">
        <div class="head-left">
          <div class="left-tips">订单提交成功，请尽快付款！</div>
          <div class="left-tips-time">请您尽快完成支付，否则订单会被自动取消</div>
        </div>
        <div class="head-right">
          <div>应付金额 <span class="price">{{ unitPrice(totalPrice, "￥", "") }}</span>元</div>
        </div>
      </div>
      <div class="content">
        <div class="pay-way">微信支付</div>
        <div class="qrcode">
          <div style="width:200px;height:200px;border:1px solid #eee;">
            <vue-qr :text="qrcode" :margin="0" colorDark="#000" colorLight="#fff" :size="200"></vue-qr>
          </div>
          <div class="intro">
            <div class="toolItem">
              <svg class="icon-third" aria-hidden="true" style="font-size: 5px">
                <use xlink:href="#icon-third-ziyuan2"></use>
              </svg>
              <span class="toolTitle">
             请使用微信扫码付款
          </span>
            </div>
          </div>
        </div>
        <div class="btn-div">
          <p class="mb_10">支付成功后自动跳转，如未跳转请点击按钮手动跳转。。。</p>
          <div style="margin-top: 20px">
            <a-space size="large">
              <a-button @click="handlePay">重新支付</a-button>
              <a-button type="primary" @click="router.push('/mall/payDone')">支付成功</a-button>
            </a-space>
          </div>
        </div>
      </div>
    </div>
  </a-spin>
</template>
<script lang="ts" setup>
import { onMounted, ref } from "vue";
import vueQr from "vue-qr/src/packages/vue-qr.vue";
import { pay, payCallback } from "@/api/pay";
import { getOrder } from "@/api/order";
import { useRoute, useRouter } from "vue-router";
import { unitPrice } from "@/utils";

const totalPrice = ref<any>();
const router = useRouter();
const route = useRoute();
const orderSn = route.params.orderSn; //订单编号
const qrcode = ref<any>(""); // 二维码
const interval = ref<any>(null); // 定时器
const num = ref<any>(0);// 商品数
const loading = ref<boolean>(false);

// 获取支付二维码
async function handlePay() {
  loading.value = true;
  try {
    const orderData: any = await getOrder(orderSn);
    totalPrice.value = orderData.result.actualPrice;
    const params = {
      paymentType: "NATIVE",
      price: totalPrice.value,
      orderSn: orderSn,
      description: orderData.result.orderTitle
    };
    const data: any = await pay(params);
    qrcode.value = data.result;
    num.value = 0;
    interval.value = setInterval(callback, 5000);
  } finally {
    loading.value = false;
  }
}

async function callback() { // 支付回调接口
  num.value++;
  if (num.value >= 7) {
    clearInterval(interval.value);
    interval.value = null;
  }
  const res: any = await payCallback(orderSn);
  if (res.result) {
    clearInterval(interval.value);
    interval.value = null;
    await router.push("/mall/payDone");
  }
}

onMounted(() => {
  handlePay();
});
</script>
<style scoped lang="scss">
@import "@/assets/style/course/global.scss";

.head-left {
  font-weight: bold;
}

.left-tips {
  font-size: 21px;
}

.left-tips-time {
  font-size: 16px;
}

.wrapper-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.75;
}

.wrapper-head,
.content {
  padding: 20px 40px;
  width: 1000px;
  margin: 20px auto;
}

.wrapper {
  width: 100%;
  color: #515a6e;
  height: 88.5vh;
}

.content {
  background-color: #fff;
  box-shadow: 0 6px 10px #ddd;
  position: relative;
  display: flex;
  height: 350px;

  .pay-way {
    font-weight: bold;
    font-size: 18px;
  }

  .qrcode {
    margin: 30px 0 0 120px;
  }

  .intro {
    background-color: #ff7674;
    height: 40px;
    line-height: 40px;
    margin-top: 10px;
    color: #fff;
    font-size: 16px;
    text-align: center;
  }

  .btn-div {
    margin: 120px 0 0 50px;
    font-size: 13px;
  }

  a {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: $theme_color;
  margin: 0 5px;
}

.head-right {
  font-weight: bold;
}

.toolItem {
  display: flex;
  align-items: center;
  margin-left: 10px;
}


.toolTitle {
  font-size: 14px;
  margin: 0 10px
}
</style>
